<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/layouts/taglib.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>index</title>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>

    <link rel="stylesheet" href="${ctx}/static/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/static/css/bootstrap-table.css">
    <link rel="stylesheet" href="${ctx}/static/css/font-awesome.css">
    <script src="${ctx}/static/js/jquery.js"></script>
    <script src="${ctx}/static/js/bootstrap.js"></script>
    <script src="${ctx}/static/js/bootstrap-table.min.js"></script>
    <script src="${ctx}/static/js/bootstrap-table-zh-CN.js"></script>
    <script src="${ctx}/static/plugins/laydate/laydate.js"></script>
    <script src="${ctx}/static/commonjs/crud.js"></script>
    <script src="${ctx}/static/commonjs/mylaydate.js"></script>

    <script>

        $(function () {

            initTable();

            initStartAndEnd("#search_stratDate", "#serach_endDate");


            // 清除模态框数据，让其重新加载
            $("#myModal").on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
            });
        });

        function initTable() {
            //先销毁表格
            $('#myTable').bootstrapTable('destroy');

            $("#myTable").bootstrapTable({
                url: "${ctx}/activity/selectAll",
                method: 'get',                      // 必须为get
                dataType: 'json',
                toolbar: '#toolbar',                //工具按钮用哪个容器
                checkboxHeader:true,
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索
                //strictSearch: true,
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                //minimumCountColumns: 10,             //当列数小于此值时，将隐藏内容列下拉框。
                clickToSelect: true,                //是否启用点击选中行
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                exportDataType: 'all',
                queryParams : function queryParams(params){
                    var activity = {    // 变量名必须和controller处的变量名一致
                        //  pageSize: params.limit,   //页面大小
                        // pageNumber: params.pageNumber,  //页码
                        startDate: $("#search_startDate").val() ,
                        exceptDate: $("#search_exceptDate").val(),
                        //sort: params.sort,  //排序列名
                        //sortOrder: params.order//排位命令（desc，asc）
                    }

                    return activity;
                },

                columns: [
                    {
                        field: 'name',
                        title: '活动名称1',
                        //   formatter: function (value, row, index) {
                        //      return index+1;
                        // }
                    },
                    {
                        field: 'description',
                        title: '描述',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    }, {
                        field: 'price',
                        title: '价格',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    }, {
                        field: 'startDate',
                        title: '开始时间',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter:function(value, row, index){
                            return dateFormatter(value);
                        }
                    }, {
                        field: 'endDate',
                        title: '结束时间',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return dateFormatter(value);
                        }
                    }, {
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            return [
                                ' <a href="${ctx}/activity/loadActivity?id=' + row.id + '" data-toggle="modal" data-target="#myModal" class="btn btn-icon-only purple"><i class="fa fa-edit"></i></a>' +
                                '<a href="${ctx}/activity/deleteActivity?id=' + row.id + '"' + 'onclick="javascript:return deleteConfirm()" class="btn btn-icon-only red"> <i class="fa fa-times"></i></a>',
                            ].join('');
                        }
                    }
                ],
            });
        }

        function initStartAndEnd(startSelector, endSelector){

            var start = {
                elem: "#serach_startDate",
                //elem: startSelector,
                format: "YYYY/MM/DD",
                festival:true, //显示节日
                choose:function(datas){
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            }

            var end = {
                elem:"#search_endDate",
                //elem :endSelector,
                format: 'YYYY/MM/DD',
                //min: laydate.now(),
                istime: true,
                istoday: false,
                choose: function(datas){
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            }

            laydate(start);
            laydate(end);
        }


        function queryParams(params) {
            var param = {
                orgCode: $("#orgCode").val(),
                userName: $("#userName").val(),
                startDate: $("#startDate").val(),
                endDate: $("#endDate").val(),
                limit: this.limit, // 页面大小
                offset: this.offset, // 页码
                pageindex: this.pageNumber,
                pageSize: this.pageSize
            }
            return param;
        }


        function deleteTask() {
            if (confirm("are you sure"))
                return true;
            else
                return false;
        }


        function rowStyle(row, index) {
            var classes = ['active', 'success', 'info', 'warning', 'danger'];

            if (index % 2 === 0 && index / 2 < classes.length) {
                return {
                    classes: classes[index / 2]
                };
            }
            return {};
        }

        /**
         * 日期格式化
         */
        function dateFormatter(value) {
            var val = new Date(value);
            var year = val.getFullYear();
            var month = val.getMonth() + 1;
            var days = val.getDate();
            var hours = val.getHours();
            var minutes = val.getMinutes();

            // return year + "/" + month + "/" + days + " " + hours + ":" + minutes;
            return year + "/" + month + "/" + days;
        }

        function actionFormatter(val, row) {
            return [
                ' <a href="/activity/loadActivity?id=' + row.id + '&" data-toggle="modal" data-target="#myModal" class="btn btn-icon-only purple"><i class="fa fa-edit"></i></a>' +
                '<a href="/activity/deleteActivity?id=' + row.id + '&"' + 'onclick="javascript:return deleteTask()" class="btn btn-icon-only red"> <i class="fa fa-times"></i></a>',
            ].join('');
        }
    </script>

</head>
<body style="margin:100px">

<!-- 模态声明 -->
<div class="modal fade" id="myModal" tabindex="-1" data-keyboard="true">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明  发送请求，加载task_save.jsp的数据到modal-content中-->
        <div class="modal-content">
        </div>
    </div>
</div>

<div class="row base-margin" id="query">
    <!--
    <ol class="breadcrumb">
        <li><strong><span style="color: #27a0d7">用户列表</span></strong></li>
    </ol>
     -->
    <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
        <div class="form-group">
            <label for="search_startDate" class="control-label">开始日期:</label>
            <input placeholder="开始日期" type="text" class="form-control" id="search_startDate" name="search_startDate">
        </div>
        <div class="form-group">
            <label for="search_endDate" class="control-label">结束日期：</label>
            <input placeholder="结束日期" type="text" class="form-control " id="search_endDate" name="search_endDate">
        </div>
        <div class="form-group">
            <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
        </div>

    </form>
</div>

<div class="container">
</div>
<table id="myTable"></table>


</body>
</html>